<template>
    <view class="news">
        <u-navbar title="常见问题" :is-back="false" ></u-navbar>
        <view class="faq-section">
            <view class="faq-header">
                <text class="label bold label-title">常见问题</text>
            </view>
            <u-collapse>
                <u-collapse-item
                    v-for="(item, index) in articleList"
                    :key="index"
                    title="item.title"
                    :open="item.isOpen"
                >
                    <template v-slot:title>
                        <view class="title-box">
                            <u-icon name="question-circle-fill" :size="32" color="#aeb3bd" />
                            {{ item.title }}
                        </view>
                    </template>
                    <view class="show-box"> {{ item.description }}</view>
                </u-collapse-item>
            </u-collapse>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

import { getArticleList } from '@/api/news'

const articleList = ref([])
const getData = async () => {
    try {
        const data = await getArticleList()
        // 校验数据有效性并深拷贝
        const validData = Array.isArray(data) ? JSON.parse(JSON.stringify(data)) : []

        validData.map((item, index) => {
            if (index === 0) {
                item.isOpen = true
            }
            return item // 确保 map 返回新数组
        })

        articleList.value = validData
    } catch (error) {
        console.error('获取数据失败:', error)
        articleList.value = [] // 异常时赋默认值
    }
}

onLoad(() => {
    getData()
})
</script>

<style lang="scss">
.news {
}

.faq-section {
    margin: 20rpx 20rpx 20rpx;
    height: auto; /* 设置固定高度 */
    background-image: linear-gradient(to bottom, #dee8fe, #ffffff); /* 添加渐变 */
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-size: 100% 30%;
    padding: 0 20rpx;
    border-radius: 16rpx;
}

.faq-header {
    padding: 40rpx 0 20rpx 10rpx;
}

.title-box {
    margin-left: 10rpx;
    font-weight: bold;
}

.title-text {
    margin-left: 15rpx;
    font-size: 26rpx;
    font-weight: 500;
}

.show-box {
    padding: 20rpx;
    background-color: #f9f9f9;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
}
</style>
